var regions;

$(document).ready(function(){
	initialize();
});

function initialize() {
	$.getJSON('GetAllRegions', function(data) {
		regions = data;
		createRegionTable();
	});
}

function createRegionTable() {
	$("#regionTable").jqGrid({
		datatype: "local",
		height: 500,
	   	colNames:['Region name'],
	   	colModel:[
	   		{name:'name',index:'name', width:250}	
	   	],
	   	multiselect: false,
	   	caption: "Regions",
	   	onSelectRow: function(id) {
	   		selectRegion(id);
	   	}
	});

	for(var i=0;i<=regions.length;i++)
		jQuery("#regionTable").jqGrid('addRowData',i+1,regions[i]);	
}

function selectRegion(id) {
	var region = regions[id - 1];
	alert(region.name);
}